<template>
    <div class="app-container">
        <!-- 查询条件开始 -->
        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
            <el-form-item label="所属部门" prop="deptId">
                <el-select v-model="queryParams.deptId" placeholder="请选择所属部门" clearable size="small" style="width:200px">
                    <el-option v-for="d in deptList" :key="d.deptId" :label="d.deptName" :value="d.deptId"/>
                </el-select>
            </el-form-item>
            <el-form-item label="患者名称" prop="patientName">
                <el-input v-model="queryParams.patientName" placeholder="请输入患者名称" clearable size="small" style="width:200px"/>
            </el-form-item>
            <el-form-item label="挂号类型" prop="schedulingType">
                <el-select v-model="queryParams.schedulingType" placeholder="可用状态" clearable size="small" style="width:200px">
                    <el-option v-for="dict in schedulingTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
                </el-select>
            </el-form-item>
            <el-form-item label="挂号时段" prop="subsectionType">
                <el-select v-model="queryParams.subsectionType" placeholder="挂号时段" clearable size="small" style="width:200px">
                    <el-option v-for="dict in subsectionTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
                </el-select>
            </el-form-item>
            <el-form-item label="挂号状态" prop="registrationStatus">
                <el-select v-model="queryParams.registrationStatus" placeholder="挂号状态" clearable size="small" style="width:200px">
                    <el-option v-for="dict in regStatusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
                </el-select>
            </el-form-item>
            <el-form-item label="挂号时间" prop="queryDate">
                <el-date-picker v-model="queryParams.queryDate" size="small" style="width:200px" value-format="yyyy-MM-dd" type="date"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getPatientList()">搜索</el-button>
                <el-button type="normal" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->
        <!-- 数据表格开始 -->
        <el-table v-loading="loading" border :data="regTableList">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="right" inline class="demo-table-expand">
                        <el-form-item label="挂号ID:"><span>{{ props.row.registrationId }}</span></el-form-item>
                        <el-form-item label="挂号员:"><span>{{ props.row.createBy }}</span></el-form-item>
                        <el-form-item label="创建时间:"><span>{{ props.row.createTime }}</span></el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="患者姓名" align="center" prop="patientName"/>
            <el-table-column label="挂号科室" align="center" prop="deptId" :formatter="deptIdFormatter"/>
            <el-table-column label="接诊医生" align="center" prop="doctorName"/>
            <el-table-column label="挂号费用" align="center" prop="registrationAmount"/>
<!--                <template slot-scope="scope"><span>{{ scope.row.registrationAmount|rounding }}</span></template>-->
<!--            </el-table-column>-->
            <el-table-column label="流水编号" align="center" prop="registrationNumber"/>
            <el-table-column label="状态" align="center" prop="registrationStatus" :formatter="regStatusFormatter"/>
            <el-table-column label="就诊日期" align="center" prop="visitDate"/>
            <el-table-column label="挂号类型" align="center" prop="schedulingType" :formatter="schedulingTypeFormatter"/>
            <el-table-column label="挂号时段" align="center" prop="subsectionType" :formatter="subsectionTypeFormatter"/>

            <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.registrationStatus=='0'" type="success" icon="el-icon-check" size="mini"
                               @click="handleCollect(scope.row)">收费
                    </el-button>
                    <el-button v-if="scope.row.registrationStatus=='1'" type="danger" icon="el-icon-close" size="mini"
                               @click="handleReturn(scope.row)">退号
                    </el-button>
                    <el-button v-if="scope.row.registrationStatus=='0'" type="danger" icon="el-icon-check" size="mini"
                               @click="handleInvalid(scope.row)">作废
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 数据表格结束 -->

        <el-pagination v-show="total>0" :current-page="currentPage" :page-sizes="[5, 10, 20, 30]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
        <!-- 分页控件结束 -->
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // // 分页数据总条数
                currentPage: 1,
                pageSize: 5,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    patientName: undefined,
                    schedulingType: undefined,
                    subsectionType: undefined,
                    visitDate: undefined,
                    queryDate: new Date()
                },
                // 遮罩层
                loading: false,
                // 总条数
                total: 0,
                // 挂号数据
                regTableList: [],
                // 部门数据
                deptList: [],
                // 用户数据
                userList: [],
                // 挂号单状态数据字典
                regStatusOptions: [],
                // 门诊急诊
                schedulingTypeOptions: [],
                // 上午  中午  晚上
                subsectionTypeOptions: [],
            }
        },
        created() {
            // 查询挂号信息
            this.getPatientList();
            //加载所有部门
            this.initDept();
            // 加载挂号时段
            this.subsectionTime();
            // 加载挂号类型
            this.schedulingType();
            //加载挂号状态字典
            this.registrationstatus();
        },
        methods: {
            // 查询表格数据
            getPatientList() {
                this.$axios.post("/doctor/api/registration/getAllInfo/" + this.currentPage + "/" + this.pageSize, this.queryParams).then(result => {
                    this.regTableList = result.data.t.records;
                    this.total = result.data.t.total;
                })
            },
            // /重置
            resetQuery() {
                this.queryParams = {}
                this.getPatientList();
            },
            // 分页pageSize变化时触发
            handleSizeChange(val) {
                this.pageSize = val
                // 重新查询
                this.getPatientList()
            },
            // 点击上一页  下一页，跳转到哪一页面时触发
            handleCurrentChange(val) {
                this.currentPage = val
                // 重新查询
                this.getPatientList()
            },

            //初始化部门
            initDept() {
                this.$axios.get("/system/api/dept/list").then(result => {
                    this.deptList = result.data.t;
                })
            },
            // 解析科室
            deptIdFormatter(row){
                let val=row.deptId;
                for(let i=0;i<this.deptList.length;i++){
                    if(this.deptList[i].deptId==val){
                        return this.deptList[i].deptName;
                    }
                }
                return "";
            },
            //初始化挂号时段字典
            subsectionTime() {
                this.$axios.get("/system/api/dict/data/findByType/his_subsection_type").then(result => {
                    this.subsectionTypeOptions = result.data.t;
                })
            },
            // // 挂号时段解析
            // subsectionTypeOptions(row) {
            //     let v = row.subsectionTypeOptions;
            //     return this.formatDict(this.subsectionTypeOptions, v)
            // },
            //初始化挂号类型字典
            schedulingType() {
                this.$axios.get("/system/api/dict/data/findByType/his_scheduling_type").then(result => {
                    this.schedulingTypeOptions = result.data.t;
                })
            },
            // // 挂号类型解析
            // schedulingTypeOptions(row) {
            //     let v = row.schedulingTypeOptions;
            //     return this.formatDict(this.schedulingTypeOptions, v)
            // },
            //初始化挂号状态字典
            registrationstatus() {
                this.$axios.get("/system/api/dict/data/findByType/his_registration_status").then(result => {
                    this.regStatusOptions = result.data.t;
                })
            },
            // // 挂号状态解析
            // regStatusOptions(row) {
            //     let v = row.regStatusOptions;
            //     return this.formatDict(this.regStatusOptions, v)
            // },

            //表格数据 解析 加载挂号类型
            schedulingTypeFormatter(row) {
                let v = row.schedulingType;
                return this.formatDict(this.schedulingTypeOptions, v);
            },

            //表格数据 解析 加载挂号挂号时段
            subsectionTypeFormatter(row) {
                let v = row.subsectionType;
                return this.formatDict(this.subsectionTypeOptions, v);
            },

            //表格数据 解析 加载挂号状态
            regStatusFormatter(row){
                let v = row.registrationStatus;
                return this.formatDict(this.regStatusOptions, v);
            },

            // 收费
            handleCollect(row) {
                // alert(row.registrationId)
                this.$axios.get("/doctor/api/registration/getStatus/" + row.registrationId).then(result => {
                    this.$message({ showClose: true, message: "msg", type: 'success' })
                    this.getPatientList()
                }).catch(() => {
                    this.$message({ showClose: true, message: "msg", type: 'error' })
                })
            },
            // 退号
            handleReturn(row) {
                // alert(row.registrationId)
                this.$axios.get("/doctor/api/registration/getStatus/" + row.registrationId).then(result => {
                    this.$message({ showClose: true, message: "msg", type: 'success' })
                    this.getPatientList()
                }).catch(() => {
                    this.$message({ showClose: true, message: "msg", type: 'error' })
                })

            },
            // 作废
            handleInvalid(row) {
                this.$axios.get("/doctor/api/registration/getVoid/" + row.registrationId).then(result => {
                    this.$message({ showClose: true, message: "msg", type: 'success' })
                    this.getPatientList()
                }).catch(() => {
                    this.$message({ showClose: true, message: "msg", type: 'error' })
                })
            }
        }
    }
</script>

<style scoped>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand span  {
        width: 200px;
        display: inline-block;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
